import { View, Text, Image } from 'react-native'
import React from 'react'
import { Stack, useRouter } from 'expo-router'
import { zhThemeColor, zhThemeColorInverse } from '../../global'
import { Icon } from '@rneui/themed'

export default function() {
  const router = useRouter()
  return (
    // 栈式导航
    // Stack 放置多个页面的公共内容
    <Stack screenOptions={{
      headerStyle: {
        backgroundColor: zhThemeColor
      },
      headerTintColor: zhThemeColorInverse,
      headerTitleStyle: {
        fontSize: 16
      },
      headerTitleAlign: 'center'
    }}>
      {/* 每个页面独立的内容 */}
      <Stack.Screen
        name='list' 
        options={{
          title: '商品列表',
          headerLeft: () => (  // 导航栏左侧
            // <Text
            //   style={{color: zhThemeColorInverse}}
            //   onPress={() => router.back()}
            // >返回</Text>
            <Icon 
              type='antdesign' 
              name='arrowleft' 
              color={zhThemeColorInverse} 
              onPress={() => router.back()} 
            />
          ),
          headerRight: () => (  // 导航栏右侧
            <Image 
              source={require('../../assets/img/list.png')}
              style={{width: 30, height: 30}}
            />
          )
        }}
      />
      <Stack.Screen
        name='detail' 
        options={{
          title: '商品详情'
       }} 
      />
    </Stack>
  )
}